function css(element, attr, val) {
  // 通过判断 归纳transform 属性 直接跳到cssTramsform 剩下的直接常规方法处理
  if (
    attr == 'rotate' ||
    attr == 'rotateX' ||
    attr == 'rotateY' ||
    attr == 'rotateZ' ||
    attr == 'scale' ||
    attr == 'scaleX' ||
    attr == 'scaleY' ||
    attr == 'skewX' ||
    attr == 'skewY' ||
    attr == 'translateX' ||
    attr == 'translateY' ||
    attr == 'translateZ'
  ) {
    return cssTransform(element, attr, val);
  }
  if (arguments.length == 2) {
    var val = getComputedStyle(element)[attr];
    if (attr == 'opacity') {
      val = Math.round(val * 100);
    }
    return parseFloat(val);
  }
  if (attr == 'opacity') {
    element.style.opacity = val / 100;
  } else {
    element.style[attr] = val + 'px';
  }
}

function cssTransform(el, attr, val) {
  if (!el.transform) {
    el.transform = {};
  }
  // 如果val为空 为获取值
  if (typeof val == 'undefined') {
    if (typeof el.transform[attr] == 'undefined') {
      switch (attr) {
        case 'scale':
        case 'scaleX':
        case 'scaleY':
          el.transform[attr] = 100;
          break;
        default:
          el.transform[attr] = 0;
      }
    }
    return el.transform[attr];
  } else {
    // 设置值 原理就是对象的赋值
    var transformVal = '';
    el.transform[attr] = Number(val);
    for (var s in el.transform) {
      switch (s) {
        case 'rotate':
        case 'rotateX':
        case 'rotateY':
        case 'rotateZ':
        case 'skewX':
        case 'skewY':
          transformVal += ' ' + s + '(' + el.transform[s] + 'deg)';
          break;
        case 'translateX':
        case 'translateY':
        case 'translateZ':
          transformVal += ' ' + s + '(' + el.transform[s] + 'px)';
          break;
        case 'scale':
        case 'scaleX':
        case 'scaleY':
          transformVal += ' ' + s + '(' + el.transform[s] / 100 + ')';
          break;
      }
    }
    el.style.WebkitTransform = el.style.transform = transformVal;
  }
}
